<script setup>
import router from '@/router';
import { ref,reactive } from 'vue';
import { NavBar,Button,Popup  } from 'vant';
const platformList = ref(['抖音','快手', '小红书','视频号'])
const list = reactive([
    {
        pingTai:'抖音',
        user:['88888888','99999999']
    },
    {
        pingTai:'快手',
        user:['88888888','99999999']
    },
    {
        pingTai:'小红书',
        user:['88888888','99999999']
    },
    {
        pingTai:'视频号',
        user:['88888888','99999999']
    }
])
const show = ref(false)
const placeholder = ref('')
const openDialog = (item) => {
    show.value = true
    placeholder.value = `输入${item}账号`
}

const userTextarea = ref('')
const cencel = () => {
    show.value = false
    userTextarea.value = ''
}

const verify = () => {
    console.log('确认');
}
const onClickLeft = () => {
    router.back();
}

const delUser = (item) => {
    console.log(item);
}
</script>

<template>
    <div class="page">
        <NavBar
        style="height: 15vw;"
          title="截流账号"
          left-text="返回"
          left-arrow
          @click-left="onClickLeft"
          safe-area-inset-top
          clickable
        />
        <div class="top">
            <div class="top-item" @click="openDialog(item)" v-for="item,index in platformList" :key="index">{{ item }}</div>
        </div>
        <div class="cell" v-for="item,index in list" :key="index">
            <div class="cell-title">{{item.pingTai + '(' + item.user.length + ')'}}</div>
            <div class="cell-item" v-for="e,i in item.user" :key="i">
                <div>{{ e }}</div>
                <div class="cell-del" @click="delUser(e)">删除</div>
            </div>
        </div>
        <div class="popup-bottom">
            <Button class="btn-choose">确认</Button>
        </div>
        <Popup 
        v-model:show="show" 
        round
        position="center">
          <div class="popup-content">
            <textarea v-model="userTextarea" class="dialog-textarea" :placeholder="placeholder"></textarea>
            <div class="popup-content-bottom">
                <div class="cencel" @click="cencel">取消</div>
                <div class="verify" @click="verify">确认</div>
            </div>
          </div>
        </Popup>
    </div>
</template>

<style scoped>
    ::v-deep .van-nav-bar__content{
        height: 100%;
    }
    .page{
        background-color: rgb(245,247,250);
        padding-bottom: 22vw;
    }
    .top{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 5vw 4vw;
    }
    .top-item{
        width: 20vw;
        height: 10vw;
        text-align: center;
        line-height: 10vw;
        border-radius: 38vw;
        color: #fff;
        font-size: 4vw;
    }
    .top-item:nth-child(1){
        background-color: rgb(23,11,26);
    }
    .top-item:nth-child(2){
        background-color: rgb(255,74,8);
    }
    .top-item:nth-child(3){
        background-color: rgb(255,46,77);
    }
    .top-item:nth-child(4){
        background-color: rgb(250,157,59);
    }
    .cell{
        margin: 0 4vw 5vw;
    }
    .cell-title{
        font-size: 3.73vw;
        color: rgb(144,147,153);
        margin-bottom: 4vw;
    }
    .cell-item{
        width: 100%;
        height: 17vw;
        background-color: #fff;
        border-radius: 2vw;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 5vw;
        box-sizing: border-box;
        margin-bottom: 3vw;
        font-size: 4.27vw;
        color: rgb(48,49,53);
    }
    .cell-del{
        padding: 1vw 3vw;
        box-sizing: border-box;
        border-radius: 1vw;
        background-color: rgb(246,248,251);
        color: rgb(144,147,153);
        font-size: 3.73vw;
    }
    .popup-bottom{
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    width: 100%;
    height: 22vw;
    background-color: #fff;
    padding-top: 1vw;
    }
    .btn-choose{
        width: 91vw;
        height: 12vw;
        background-color: rgb(64,158,255);
        color: #fff;
        font-size: 4.27vw;
        border-radius: 26.67vw;
    }
    .dialog-textarea{
        width: 71vw;
        height: 25vw;
        border-radius: 1vw;
        margin: 4vw;
        background-color: rgb(245,247,250);
        padding: 3vw 4vw;
        font-size: 4.27vw;
        border: none;
    }
    .popup-content-bottom{
        display: flex;
        width: 100%;
        height: 15vw;
        border-top: 1px solid rgb(235,238,245);
    }
    .cencel{
        flex: 1;
        text-align: center;
        height: 100%;
        line-height: 15vw;
        color: rgb(144,147,153);
        font-size: 4.53vw;
    }
    .verify{
        flex: 1;
        text-align: center;
        height: 100%;
        line-height: 15vw;
        color: rgb(64,158,255);
        font-size: 4.53vw;
        border-left: 1px solid rgb(235,238,245);
    }
</style>